<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的打赏图片</title>
	<script src="__PUBLIC__/home/js/jquery-2.1.1.min.js" type="text/javascript"></script>

    <script src="__PUBLIC__/layer/layer.js" type="text/javascript"></script>

<style>
body{margin:0;padding:0;font-family:"微软雅黑";font-size:14px;}
img{border:0;}
li{list-style:none;}
a{text-decoration:none;color:#666666;}
.clear:after{content:'.';height:0;clear:both;display:block;visibility:hidden;}
.left{float:left;}
h1,p,h3,h4,h5,h6,ul,li,dl,dt,dd,hr,div,p,form,input,font { margin:0; padding:0; font-weight:normal; text-indent:0; list-style-type:none; }
#background{position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;}
#background img{width:100%;height:100%;}
.head{width:100%;height:40px;background:#000; filter:alpha(opacity:30); opacity:0.3;position:absolute;top:0;z-index: 2;}
.head a{display:block;color:#fff;text-align: center;line-height:30px;font-weight: bold;font-size:18px;}
.head ul{width:80%;height:30px;margin:0 auto; border: 1px solid #fff;z-index: 3;position: absolute;top:5px;border-radius: 50px;left:10%;}
.high{width:50%;height:30px;position:absolute;z-index: 3;border-right:1px solid #fff;text-align: center;line-height:30px;}
.low{width:50%;height:30px;position:absolute;right:0;z-index: 3;line-height:30px;}
.head .high a:hover{background:#ccc;border-top-left-radius:10px 10px;border-bottom-left-radius:10px 10px;text-decoration: none;color:#000;}
.head .low a:hover{background:#ccc;border-top-right-radius:10px 10px;border-bottom-right-radius:10px 10px;text-decoration: none;color:#000;}
.left{width:100%;margin-left:2%;float:left;margin-top:10px;position:absolute;top:45px;}
.left .left_img{width:40px;height:40px;background:#fff;border-radius:50%;margin:auto;display:inline;float:left;margin-left:5px;}
.left .left_img img{width:40px;height:40px;background:#fff;border-radius:50%;margin:auto;display:inline;float:left;}
#footer{position:absolute;bottom:0;width:100%;height:60px;background:#000;z-index:-1;}
#footer .left{width:10%;margin-left:2%;float:left;}
#footer .center{width:40%;margin-left:15%;float:left;}
#footer .right{width:30%;margin-left:5%;float:left;}
#footer .left1 .left_img1{width:40px;height:40px;background:#fff;border-radius:50%;margin:auto;position:absolute;bottom:5px;z-index:1;margin-left:1%;}
#footer .left1 .left_img1 img{width:40px;height:40px;background:#fff;border-radius:50%;margin:auto;}
#footer .give1{color:#ccc;text-align:left;font-size:12px;padding-top:2px;}
#footer .right{float:left;text-align:right;}
#footer .right .give1{color:#ccc;text-align:left;font-size:12px;padding-top:5px;}
#footer .right .give2{color:#ccc;text-align:left;font-size:18px;padding-top:5px;}
.gong{position:absolute;right:5px;top:5px;height:60px;line-height:60px;width:60px;background-size:40px 40px;}
#content1{width:100%;height:220px;position: relative;text-align: center;margin:0 auto;margin-bottom:20px;}
#nav1{width:300px;height:200px;margin:60px auto;z-index:1;position: absolute; top:100px; left: 0; bottom: 100px; right: 0;box-shadow:0px 0px 50px #fff;background:#000;border-radius:10px;}
#nav1 .tixian{width:70%; height:50px;position: absolute;top:20px;left:20%;z-index:1;color:#fff;font-size:16px;}
#nav1 .tixian .money{margin-bottom:20px;}
#nav1 .reward1{width:100%;height:65px;position: absolute;top:55%;}
#nav1 .reward1 p{width:100%;height:50px;position: absolute;top:0;font-size:12px;color:#666;}
#nav1 .reward1 a{display:block;width:100%;height:100%;}
#nav1 .reward1 .dashang1{width:40%;height:40px;position: absolute;bottom:0;left:10%;background:none;color:#00CC33;border-radius:10px;float:left;}
#nav1 .reward1 .dashang2{width:40%;height:40px;position: absolute;bottom:0;left:60%;border-radius:10px;background:none;color:#fff;float:left;}
.btn{width:90%;margin-left:5%;position:absolute;bottom:0;float:left;}
.btn1{border-color:#0000FF;width:17px;height:17px;position:absolute;top:10%;left:0;}
.btn2{border-color:#0000FF;width:17px;height:17px;position:absolute;top:95%;left:0;}
.number{border-radius:50%;border:1px solid #fff;font-size:10px;margin-left:5px;height:15px;width:15px;line-height:15px;text-align:center;display:inline-block;}
.desc{font-size:14px;}
.number1{border-radius:10px;border:1px solid #fff;font-size:10px;padding:5px;width:50px;display:inline-block;text-align:left;}
.btn3{width:50px;background:none;border-radius:10px;border:1px solid #fff;color:#fff;}
</style>
</head>

<script>
   function lun(i){
   
   if(i==1){
      $('#qingxi').css('display','block');
	  $('#mohu').css('display','none');
   }else{
      $('#mohu').css('display','block');
	  $('#qingxi').css('display','none');
   
   }
   
   }
</script>
<body>
<div id="content">
	<div id="background">
	<img src="__ROOT__/images/{$re.qingxi}" id="qingxi"/>
	<img src="__ROOT__/images/{$re.mohu}" id="mohu" style="display:none;"/>
	</div>    
<div class="head">
        <ul>
            <li class="high"><a style="cursor:pointer;" onclick="lun(1)">高清</a></li>
            <li class="low"><a style="cursor:poiunter;" onclick="lun(2)">模糊</a></li>
        </ul>
</div>

<div id="content1" style="display:none;">
    <div id="nav1">
        <div class="tixian">
          
		   
		   <if condition="$re.type eq 0">
		    <input type="radio" class="btn1" value="0" name="type" checked>
		   <div class="money">
		   	<span class="number">1</span><span class="desc">最低限额打赏</span>￥&nbsp;&nbsp;<input type="text" value="{$re.suijistart}" class="btn3" id="suiji">
		   </div>
		  <input type="radio" class="btn2" value="1" name="type">
		  <div class="money">
		  	<span class="number">2</span><span class="desc">固定金额打赏</span>￥&nbsp;&nbsp;<input type="text" value="" class="btn3" id="guding"> 
		  </div>
		  <else/>
		    <input type="radio" class="btn1" value="0" name="type" >
		   <div class="money">
		   	<span class="number">1</span>&nbsp;&nbsp;<span class="desc">最低限额打赏￥&nbsp;&nbsp;</span><input type="text" value="" class="btn3" id="suiji">
		   </div>
		  <input type="radio" class="btn2" value="1" name="type" checked>
		  <div class="money">
		  	<span class="number">2</span>&nbsp;&nbsp;<span class="desc">固定金额打赏￥&nbsp;&nbsp;</span><input type="text" value="{$re.gudingmoney}" class="btn3" id="guding">
		  </div>
		  
		  
		  </if>
		  
        </div>
        <div class="reward1">
            <p>Tips:偷拍Ta的照片发送给Ta,打赏才能看！</p>
			<div class="btn">
			<input type="button" onclick="dosubmit()" class="dashang1" value="提交">
			  <input type="button" class="dashang2" style="cursor:pointer;" onclick="guanbi()" value="关闭">
			</div>
        </div>
    </div>
</div>
<div id="footer">
	<div class="left1">
		<div class="left_img1">
		<img src="{$buyer.touxiang}"/>
		</div>
	</div>
	<div class="center">
		<li class="give1">{$buyer.nicheng}</li>
		<li class="give1"><span>{$buyer.time|date="m-d H:i:s",###}</span></li>
		<li class="give1"><span>打赏了￥{$buyer.money}</span></li>
	</div>
	<div class="right">
	    <if condition="$re.type eq 0">
		<p class="give2">￥{$buyer.money}</p>
		<else/>
		<p class="give2">￥{$buyer.money}</p>
		</if>
		
		<p class="give1"><span>{$re.time|date="m-d H:i:s",###}</span></p>
		<div class="gong" onclick="shezhi()"><img src="__PUBLIC__/index/images/12123.png"/></div>
	</div>
</div> 
</div>
</body>
</html>

<script>
  
  function shezhi(){
  
     $('#content1').css('display','block');
  
  }
  
  
  function guanbi(){
  
     $('#content1').css('display','none');
  
  }
  
  
  function dosubmit(){
  
     var suiji=$('#suiji').val();
	 
	 var guding=$('#guding').val();
	 
	 var id="{$buyer.pid}";
	 
	var type= $('input[name=type]:checked').val();
	
	
	 
	 $.post("{:U('Only/shezhi')}",{"guding":guding,"suiji":suiji,"id":id,"type":type},function(re){
	    
		if(re==1){
		  
		  if(type==1){
		    $('#guding').val(guding);
			$('#suiji').val('');
		  }else{
		    $('#suiji').val(suiji);
			$('#guding').val('');
		  }
		
		  
		  alert('设置成功');
		}else{
		
		  alert('设置失败');
		}
	    
	 })
  
  
  }
  

</script>
